<template>
  <div class="main-area-box">
    <div class="up-area-box">
      <!-- 左侧图片区域 -->
      <div class="flex-center-t">
        <div>
          <img class="width-360 height-360" :src="mainPic" alt=""/>
          <div>
            <template v-if="goodsImages && goodsImages.length > 5">
              <!-- 大于5张图片时，轮播显示 -->
              <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                <el-carousel-item v-for="index of (goodsImages.length / 5)" :key="index" >
                  <div class="swiper-item-img">
                    <img v-for="(item, subIndex) in goodsImages.slice(((index - 1) * 5), (index * 5))" :src="item.imageUrl" :class="mainPic == item.imageUrl ? 'mouse-selected' : ''" @mouseenter="mousePicEnter(item)" alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
            <template v-else>
              <!-- 小于5张图片时，固定显示 -->
              <div v-if="goodsImages && goodsImages.length > 0" class="swiper-item-img">
                <img v-for="(item, index) in goodsImages" :key="index" :src="item.imageUrl" :class="mainPic == item.imageUrl ? 'mouse-selected' : ''" @mouseenter="mousePicEnter(item)" alt="" />
              </div>
            </template>
          </div>
        </div>
        <!-- 右侧商品信息 -->
        <div class="area-right mar-l-20 mar-t-20">
          <div class="font-24 font-w">{{ warehouseGoods.title }}（货号：{{ warehouseGoods.goodsCode }}）</div>
          <div class="supply-price font-14">
            <span class="mar-r-20">库存</span>
            <span>{{ warehouseGoods.stock }}</span>
          </div>
          <div class="other-info-box">
            <div>商品卖点</div>
            <div>{{ warehouseGoods.sellPoint }}</div>
          </div>
          <div class="btn-group-box">
            <el-button v-if="warehouseObj.warehouseType == 1 && warehouseObj.warehouseSource == 1" type="primary" @click="openPurchaseOrder">采购</el-button>
            <el-button v-if="warehouseObj.warehouseType == 1" type="primary" @click="openStockEdit">入库</el-button>
            <span class="backBtn" @click="$router.go(-1)" style="cursor: pointer" >返回</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 下方tab 商品详情/规格参数/sku明细 -->
    <div class="down-area-box" style="margin-top: 20px;">
      <div>
        <el-tabs type="card" v-model="tabsVal">
          <el-tab-pane label="商品详情" name="1">
            <div class="goods-info-box">
              <ul>
                <li>商品品牌：{{ warehouseGoods.brandName }}</li>
                <li>商品重量：{{ warehouseGoods.weight }}</li>
                <li>商品体积：{{ warehouseGoods.size }}</li>
                <li>商品产地: {{ warehouseGoods.prov }}   {{ warehouseGoods.city }}</li>
                <li>商品条码: {{ warehouseGoods.goodsBarCode }}</li>
              </ul>
              <div class="goods-img-box">
                <div v-html="warehouseGoods.description"></div>
              </div>
            </div>
            <div v-for="(item, index) in goodsDetailsImageList" :key="index">
              <img v-if="item && item.imageUrl" :src="item.imageUrl"/>
            </div>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="2">
            <div class="goods-info-box">
              <ul v-for="(item, index) in warehouseGoods.goodsParameters" :key="index">
                <li>{{ item.parameterName }}: {{ item.parameterValue }}</li>
              </ul>
            </div>
          </el-tab-pane>

          <el-tab-pane label="SKU明细" name="3">
              <el-table :data="warehouseGoods.warehouseSkuList" class="goods-info-box">
                <el-table-column prop="skuDetail" label="规格" width="160px"></el-table-column>
                <el-table-column prop="imageUrl" label="图片" width="140px">
                  <template slot-scope="scope">
                    <img :src="scope.row.imageUrl" height="60" />
                  </template>
                </el-table-column>
                <el-table-column label="当前库存" width="140px">
                  <template slot-scope="scope">
                    <div>{{ scope.row.stock }}</div>
                    <div class="font-green">可用：{{ scope.row.remainStock }}</div>
                    <div>占用：{{ scope.row.stockInUse }}</div>
                    <div>冻结：{{ scope.row.stockFrozen }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="条码" width="160px">
                  <template slot-scope="scope">
                    <span>{{ scope.row.goodsBarCode ? scope.row.goodsBarCode : scope.row.skuBarCode }}</span>
                  </template>
                </el-table-column>
                <template v-if="warehouseObj.warehouseType == 2">
                  <el-table-column prop="externalCode" label="外部编码" width="160px"></el-table-column>
                  <el-table-column prop="thirdCode" label="第三方编码" width="160px"></el-table-column>
                  <el-table-column label="" width="120px">
                    <template slot-scope="scope">
                      <el-button v-if="!scope.row.thirdCode" type="text" size="medium" @click="setThirdSkuCode(scope.row)">设置第三方编码</el-button>
                      <el-button v-if="scope.row.thirdCode" type="text" size="medium" @click="clearThirdSkuCode(scope.row)">清除第三方编码</el-button>
                    </template>
                  </el-table-column>
                </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 采购订单dialog -->
    <el-dialog title="采购申请" :visible.sync="purchaseOrderVisible" width="580px">
      <purchase-order-form-page :showFlag="purchaseOrderVisible" :purchaseOrder="purchaseOrderForm" @callback="doCallbackPurchaseOrder"></purchase-order-form-page>
    </el-dialog>

    <!-- 入库商品dialog -->
    <el-dialog :visible.sync='stockEditVisible' width="580px">
      <warehouse-stock-edit :showFlag="stockEditVisible" :businessTypeList="['5']" :stockOrder="stockFrom" @callback="doCloseEditStock"></warehouse-stock-edit>
    </el-dialog>

    <!-- 设置第三方编码 -->
    <el-dialog :visible.sync="setThirdSkuCodeVisible" width="580px">
      <el-form :model="warehouseGoodsForm" label-position="right" label-width="100px" style='width: 500px; margin-left:50px;'>
        <el-form-item label="商品名称">
          {{warehouseGoodsForm.title}}
        </el-form-item>
        <el-form-item label="规格描述">
          {{warehouseGoodsForm.skuDetail}}
        </el-form-item>
        <el-form-item label="外部编码">
          {{warehouseGoodsForm.externalCode}}
        </el-form-item>
        <el-form-item label="第三方仓编码">
          <div class="mar-t-10"><el-input v-model="warehouseGoodsForm.thirdCode" placeholder=""></el-input></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setThirdSkuCodeVisible = false">取消</el-button>
        <el-button type="primary" @click="saveThirdSkuCode">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getWarehouseGoods, update } from '@/api/warehouse/warehouseGoods'
  import { getTemplateList } from '@/api/componentTemplate/template'
  import warehouseStockEdit from '@/views/warehouse/components/warehouse-stock-edit'
  import purchaseOrderFormPage from '@/views/warehouse/components/purchase-order-form-page'
  import { getWarehouse } from '@/api/warehouse/warehouseInfo'

  export default {
    components: { purchaseOrderFormPage, warehouseStockEdit },
    data() {
      return {
        warehouseGoodsId: '',
        // 主图
        mainPic: '',
        warehouseGoods: {
          warehouseSkuList: []
        },
        tabsVal: '1',
        // 入库单表单
        stockFrom: {
          stockId: '',
          businessType: '5',
          supplierId: '',
          remark: '',
          warehouseGoodsIds: []
        },
        // 采购订单表单
        purchaseOrderForm: {
          purchaseOrderId: '',
          supplierId: '',
          consigneeProvinceCode: '',
          consigneeCityCode: '',
          consigneeDistrictCode: '',
          consigneeAddress: '',
          consignee: '',
          consigneePhone: '',
          remark: ''
        },
        // 采购商品dialog
        purchaseOrderVisible: false,
        // 入库商品dialog
        stockEditVisible: false,
        // 图片列表
        goodsImages: [],
        // 商品详情图片列表
        goodsDetailsImageList: [],
        // 仓库对象
        warehouseObj: {
          warehouseType: ''
        },
        setThirdSkuCodeVisible: false,
        warehouseGoodsForm: {
          warehouseGoodsId: '',
          title: '',
          skuDetail: '',
          externalCode: '',
          thirdCode: ''
        }
      }
    },
    created() {
      this.warehouseGoodsId = this.getCurrentPage().query.warehouseGoodsId
      this.purchaseOrderForm.supplierId = this.getCurrentPage().query.supplierId
      this.getGoodsDetails()
      // 获取仓库信息
      getWarehouse(this.getWarehouseId()).then((response) => {
        if (response.isError) return
        this.warehouseObj = response.data
      })
    },
    methods: {
      // 获取商品详情
      getGoodsDetails() {
        getWarehouseGoods(this.warehouseGoodsId).then(response => {
          if (response.isError) return
          this.warehouseGoods = response.data
          this.goodsImages = this.warehouseGoods.goodsImages
          if (this.goodsImages.length > 0) {
            this.goodsImages.forEach(item => {
              if (item.mainImageFlag === 1) {
                this.mainPic = item.imageUrl
              }
            })
          }
          if (this.warehouseGoods.detailTemplateId === undefined) return
          this.initTemplate(this.warehouseGoods.detailTemplateId)
        })
      },
      // 初始化模板
      initTemplate(templateId) {
        getTemplateList(templateId).then(response => {
          if (response.isError) return
          const templateList = response.data
          if (templateList.length === 0) {
            return
          }
          templateList.forEach(template => this.goodsDetailsImageList.push(template.pictureDTO))
        })
      },
      // 打开入库dialog
      openStockEdit() {
        this.stockFrom.warehouseGoodsIds = []
        this.stockFrom.warehouseGoodsIds.push(this.warehouseGoods.warehouseGoodsId)
        this.stockEditVisible = true
      },
      // 打开采购dialog
      openPurchaseOrder() {
        this.purchaseOrderForm.disableSelectSupplier = true
        this.purchaseOrderForm.warehouseGoodsIds = [this.warehouseGoodsId]
        this.purchaseOrderVisible = true
      },
      // 关闭出入库dialog事件
      doCloseEditStock() {
        this.stockEditVisible = false
      },
      // 关闭采购单dialog事件
      doCallbackPurchaseOrder() {
        this.purchaseOrderVisible = false
      },
      // 图片鼠标移入事件
      mousePicEnter(item) {
        if (item) {
          this.mainPic = item.imageUrl
        }
      },
      // 打开设置编码dialog
      setThirdSkuCode(row) {
        const originData = this.$options.data()
        this.warehouseGoodsForm = originData.warehouseGoodsForm
        this.warehouseGoodsForm.title = this.warehouseGoods.title
        this.warehouseGoodsForm.warehouseGoodsId = row.warehouseGoodsId
        this.warehouseGoodsForm.skuDetail = row.skuDetail
        this.warehouseGoodsForm.externalCode = row.externalCode
        this.setThirdSkuCodeVisible = true
      },
      // 清空编码事件
      clearThirdSkuCode(row) {
        const originData = this.$options.data()
        this.warehouseGoodsForm = originData.warehouseGoodsForm
        this.warehouseGoodsForm.thirdCode = ''
        this.warehouseGoodsForm.warehouseGoodsId = row.warehouseGoodsId
        this.saveThirdSkuCode()
      },
      // 保存处理
      saveThirdSkuCode() {
        update(this.warehouseGoodsForm).then((response) => {
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功!' })
          this.setThirdSkuCodeVisible = false
          this.getGoodsDetails()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.main-area-box {
  width: 100%;
  height: 100%;
  background: #f7f9fb;
  padding: 10px;
  .up-area-box {
    background: #fff;
    padding-top: 10px;
    .main-img-box {
      .main-img {
        img {
          width: 360px;
          height: 360px;
        }
      }
    }
    .goods-title {
      font-size: 20px;
      font-weight: 400;
      color: #323233;
      line-height: 30px;
    }
    .other-info-box {
      font-size: 14px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      & > span {
        padding-left: 13px;
        padding-right: 13px;
      }
      & > span:nth-child(1),
      & > span:nth-child(2) {
        color: #666666;
      }
    }
    .goods-table-info {
      /deep/ .el-table__row {
        font-size: 14px;
        color: #323233;
        img {
          width: 40px;
          height: 40px;
        }
      }
      /deep/ .is-leaf {
        border: none;
        background: #fff;
        color: #666666;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .btn-group-box {
      display: flex;
      padding-top: 57px;
      padding-bottom: 30px;
      & > span {
        width: 162px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        border-radius: 4px;
        text-align: center;
      }
      .addBtn {
        color: #fff;
        background: #ff5a00;
        margin-left: 152px;
      }
      .backBtn {
        color: #ff5a00;
        background: #fff2ee;
        margin-left: 14px;
      }
    }
    /deep/ .el-carousel__container {
      width: 360px;
      height: 64px;
      & .el-carousel__item {
        height: 64px;
      }
      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }
        & > img:nth-child(1) {
          margin-left: 0;
        }
      }
    }
    .swiper-item-img {
      width: 360px;
      display: flex;
      justify-content: flex-start;
      img {
        width: 64px;
        height: 64px;
        margin-left: 10px;
      }
      & > img:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  .down-area-box {
    background: #fff;
    padding-bottom: 50px;
    /deep/ .el-tabs--card {
      .el-tabs__header {
        border: none;
      }
    }
    /deep/ .el-tabs__nav-scroll {
      margin-left: 540px;
      .el-tabs__nav {
        border: none;
        .is-active {
          border-top: 2px solid #ff5a00;
        }
      }
    }
    .goods-recomment-area {
      width: 30%;
      margin-left: 540px;
      font-size: 16px;
      line-height: 30px;
      color: #333333;
    }
    .goods-info-box {
      // margin-left: 540px;
      /deep/ .el-table__header {
        margin: 0 auto;
      }
      /deep/ .el-table__body, /deep/ .el-table__empty-block {
        margin: 0 auto;
      }
      & > ul {
        list-style: none;
        width: 686px;
        margin: 0 auto;
        background: #f9f9fa;
        font-size: 14px;
        color: #333333;
        display: flex;
        padding: 13px 20px;
        flex-wrap: wrap;
        li {
          width: 33.33%;
        }
      }
      .goods-img-box {
        width: 790px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        img {
          width: 500px;
        }
      }
    }
  }
}
.flex-center-t{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .supply-price{
    padding: 20px 10px;
    background: #f9f9fa;
    color: #666666;
    margin-top: 10px;
  }
}
.area-right{
  width: 650px;
  line-height: 1.4;
}
.mouse-selected {
  border: 2px solid #f40;
}
</style>